@charset "UTF-8";
/*------------------------------------------------------
 common/2022
------------------------------------------------------*/
/* ---- txt-mainL ---- */
.txt-mainL{
	font-size: 18px;
	line-height: 1.8;
}

/* ---- ttl-catch ---- */
.ttl-catch{
	font-size: 30px;
	line-height: 1.4;
	font-weight: normal;
}

.ttl-figure{
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 40px;
}
.ttl-figure + .txt-main{margin-top: 0;}

/* gray-box */
.gray-box{
	background: #ECEFF1;
	padding: 50px 0;
	box-sizing: border-box;
}
.gray-box .inner{
	width: 100%;
	margin: 0 auto;
	padding: 0 6.07%;
	max-width: calc(1200px + 12.14%);
}
.gray-box .inner .btnLImgBox a .btnLTxt{background: #fff;}

/* dsp-flex30 */
.dsp-flex30{
	display: flex;
	column-gap: 30px;
}
/* mwAuto */
.mwAuto{margin: 0 auto!important;}

/* width */
.wInherit{width: inherit;}

/* height */
.hAuto{height:auto !important;}

/* aligh */
.alignL{text-align:left !important;}
.alignC{text-align:center !important;}
.alignR{text-align:right !important;}

/* fig-youtube */
.fig-youtube {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	max-width: 100%;
	height: auto;
}

/* max */
.maxw1200{max-width: 1200px;}
.site-main *.maxw788{max-width: 788px;}
.maxw562{max-width: 562px;}

@media screen and (max-width: 960px) {
.site-main *.maxw788{max-width: 100%;}
}
.fig-youtube iframe, .fig-youtube object, .fig-youtube embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ---- animation ---- */
/*set ScrollMagic trigger*/
.setScMc,
.setScMcChild{transition:all 0.8s ease 0.2s;}
.setScMc.enter{}
.setScMcChild:nth-child(2){transition-delay:0.6s;}
.setScMcChild:nth-child(3){transition-delay:0.9s;}
.setScMcChild:nth-child(4){transition-delay:1.2s;}
.setScMcChild:nth-child(5){transition-delay:1.5s;}
.setScMcChild:nth-child(6){transition-delay:1.8s;}
.setScMcChild:nth-child(7){transition-delay:2.1s;}
.setScMcChild:nth-child(8){transition-delay:2.4s;}
.setScMcChild:nth-child(9){transition-delay:2.7s;}
.setScMcChild:nth-child(10){transition-delay:3s;}

/*animation-in-fadeSlide*/
.animation-in-fadeSlide{
	opacity:1;
	transform:translateY(40px);
	transition:all 0.8s ease 0.2s;
}
.animation-in-fadeSlide.enter,
.enter .setScMcChild.animation-in-fadeSlide{
	opacity:1;
	transform:translateY(0);
}
/*animation-in-fadeScale*/
.animation-in-fadeScale{}
.animation-in-fadeScale.enter,
.enter .animation-in-fadeScale{}

/* ---- list-link-arw ---- */
.list-link-arw{
	display: flex;
	column-gap: 3%;
	flex-wrap: wrap;
	margin-top: 100px;
}
.list-link-arw li{width: calc((100% - 6%) / 3);}
.list-link-arw li p{height: 100%;}
.list-link-arw li a{
	line-height: 1.4;
	display: flex;
  align-items: center;	
	height: 100%;
	font-size: 20px;
	position: relative;
	padding: 20px 20px 20px 0;
	box-sizing: border-box;
	border-bottom: 2px solid #D7D7E1;
	border-top: 2px solid #D7D7E1;
}
.list-link-arw li:nth-child(n + 4) a{border-top: none;}

.list-link-arw li a:after{
	content: '';
	display: block;
	position: absolute;
	top: 50%;
	right: 20px;
	margin-top: -7px;
	width: 15px;
	height: 15px;
	background:url(/assets/images/icon_link_arrow_blue.svg) 0 0 no-repeat;
	background-size:cover;
	opacity: 0;
	transition: all 0.2s ease-in-out;
}
.list-link-arw li a:hover:after{
	background:url("/assets/images/icon_link_arrow_o.svg") 0 0 no-repeat;
	right: 15px;opacity: 1;
}


/* ---- icn-arrow ---- */
.icn-arrow{}

a:hover .icn-arrow {
/*	color: #0046a0;
	background-size: 100% 1px;*/
}
.icn-arrow:after,
.icn-arrow-w:after{
  content: "";
  display: inline-block;
  margin-left: 8px;
}
.icn-arrow:after {
  width: 20px;
  height: 16px;
  background: url(/assets/images/icon_arrow.svg)  0 center no-repeat;
  background-size: contain;
}
.icn-arrow-w:after{
  width: 20px;
  height: 16px;
  background: url(/assets/images/icon_arrow_w.svg)  0 center no-repeat;
  background-size: contain;
}
/* ---- btnImg ----*/
.btnImgBox a{
	width: 100%;
	height: 120px;
	display: block;
	position: relative;
	overflow: hidden;
	z-index: 1;
}
.btnImgBox a:after{
	content: "";
	display: block;
	position: absolute;
	width: 66.158%;
	top: 0;
	right: 40px;
	bottom: 0;
	left: 0;
	border-right: 40px solid transparent;
	border-top: 120px solid #1566CC;
}
.btnImgBox a:hover:after{
	border-top: 120px solid #0046A0;
	transition: 0.35s ease-in-out;
}
.btnImgBox a .btnTxt{
	display: block;
	width: 66.158%;
	color: #fff;
	font-size: 24px;
	line-height: 1.2;
	padding: 20px 80px 20px 26px;
	box-sizing: border-box;
	position: absolute;
	z-index: 1;
	top:50%;
	transform: translateY(-50%);
}
.btnImgBox a .btnTxt:after{}
.btnImgBox a .btnImg{
	display: block;
	overflow: hidden;
	position: relative;
	z-index: 0;
	width: calc((100% - 63.158% + 30px));
	height: 120px;
	margin-left: auto;
}
.btnImgBox a .btnImg img{
	height: 120px;
	width: auto;
	transition: all 0.2s;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.btnImgBox a:hover .btnImg img{
	transform: scale(1.05) translateX(-50%);
}
.btnImgBox a .btnTxt.icn-arrow-w:after{
	position: absolute;
	top:50%;
	right:50px;
	margin-top: -8px;
	transition: all 0.2s ease-in-out;
}
.btnImgBox a:hover .btnTxt.icn-arrow-w:after{
	right: 45px;
}
.btnImgBox a+.txt-main{
	font-size: 18px;
	line-height: 1.5;
	margin-top: 10px;
}

/* ---- btnImgL ----*/
.btnLImgBox a,
.btnLImgBox a>*,
.btnLImgBox a>*>*{
	display: block;
	background: #ECEFF1;
	width: 100%;
}
.btnLImgBox a .btnLImg{
	display: block;
	overflow: hidden;
}
.btnLImgBox a .btnLImg img{
	width: 100%;
	transition: all 0.2s;
}
.btnLImgBox a:hover .btnLImg img{transform: scale(1.05);}
.btnLImgBox a .btnLTxt{
	font-size: 20px;
	color: #1566CC;
	line-height: 1.4;
	padding: 5px 20px;
	min-height: 80px;
	box-sizing: border-box;
	position: relative;
	display: flex;
	align-items: center;
  background: #ECEFF1;
}
.btnLImgBox a:hover .btnLTxt{color: #0046A0;}
.btnLImgBox a .btnLTxt.icn-arrow>span{
	z-index: 2;
	background: transparent;
	padding: 0 24px 0 0;
}
.btnLImgBox a .btnLTxt.icn-arrow:after{
	position: absolute;
	right: 20px;
	transition: all 0.2s ease-in-out;
}
.btnLImgBox a:hover .btnLTxt.icn-arrow:after{
	background:url("/assets/images/icon_link_arrow_o.svg") 0 0 no-repeat;
	width: 20px;
  height: 16px;	
	background-size: contain;
	right: 15px;
}

.btnLImgBox a .btnLTxt.icn-arrow:before{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 60px;
	bottom: 0;
	left: 0;
	opacity: 0;
	border-right: 30px solid transparent;
  border-top: 80px solid #CFD8DC;
	transition: 0.35s ease-in-out;
	z-index: 0;
}
.btnLImgBox a:hover .btnLTxt.icn-arrow:before{opacity: 1;}


/* ---- second-pageTtl-area ---- */
.second-pageTtl-area{
	min-height: 400px;
	height: auto;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	position: relative;
	margin-bottom: 60px;
	transform: scale(1.1);
	overflow: hidden;
}
.second-pageTtl-inner{
	width: 100%;
	margin: 0 auto;
	padding: 0 6.07%;
	max-width: calc(1200px + 12.14%);
}
.second-pageTtl-inner.enter{height: 100px;}
.second-pageTtl-inner::before{
	content: "";
	width: 0;
	min-width: 0;
	position: absolute;
	top: 15px;
	left: 15px;
	display: block;
	margin-right: -20px;
	border-top: 370px solid #fff;
	border-right: 125px solid transparent;
	opacity: 0;
	transition: all 500ms 0s cubic-bezier(0.165, 0.84, 0.44, 1 );
	transition-delay: 1.5s;
}
.second-pageTtl-inner.enter::before{
	width: 50vw;
	min-width: 630px;
	opacity: 0.9;
}
.second-pageTtl-box{
	height: 100px;
	position: relative;
	z-index: 10;
}
.second-pageTtl{
	font-size: 50px;
	line-height: 1.3;
	position: absolute;
	top:100%;
	transition: all 500ms 0s cubic-bezier(0.165, 0.84, 0.44, 1);
	transition-delay: 1.7s;
	opacity: 0;
}
.second-pageTtl.enter{
	top:0;
	opacity: 1;
}

/* company */
#company.top .second-pageTtl-area{background-image: url("/company/img/pageTtl.jpg");background-size: cover;}	
/* ir */
#ir.top .second-pageTtl-area{background: url(/ir/img/pageTtl.jpg) center center;background-size: cover;}	
/* products */
#products.top .second-pageTtl-area{background-image: url(/products/img/pageTtl.jpg);background-size: cover;}	
/* innovation */
#tech.top .second-pageTtl-area{background-image: url(/innovation/img/pageTtl.jpg);background-size: cover;}	
/* sustainability */
#sustainability.top .second-pageTtl-area{background-image: url("/sustainability/img/pageTtl.jpg");background-size: cover;}	
/* careers */
#careers.top .second-pageTtl-area{background-image: url("/careers/img/pageTtl.jpg");background-size: cover;}	


.top .second-pageTtl-area.enter{
	transform: scale(1);
	transition-duration: 2s;
}

/* ---- third-pageTtl-area ---- */
.third-pageTtl-area{
	min-height: 320px;
	height: auto;
	background-size: cover;
	display: flex;
	align-items: center;
	position: relative;
	margin-bottom: 60px;	
	background-position: center top;
}
.third-pageTtl-inner{
	width: 100%;
	margin: 0 auto;
	padding: 0 6.07%;
	max-width: calc(1200px + 12.14%);
}
.third-pageTtl-inner::before{
	content: "";
	width: 50vw;
	min-width: 630px;
	position: absolute;
	top: 15px;
	left: 15px;
	display: block;
	margin-right: -20px;
	border-top: 290px solid #fff;
	border-right: 100px solid transparent;
	opacity: 0.9;
}
.third-pageTtl-box{
	position: relative;
	z-index: 10;
}
.third-pageTtl{
	font-size: 40px;
	line-height: 1.3;
	width: 10em;
	max-width: calc(38vw - (50vw - 600px));
	word-wrap: normal;
}
.third-pageTtl-box>p{
	margin-top: 10px;
	line-height: 1.6;
	max-width: 35vw;
}
.third-pageTtl-box>p>span{font-weight: 700;}

#products.search .third-pageTtl-inner::before,
#products.name .third-pageTtl-inner::before,
#products.business .third-pageTtl-inner::before{
	content: "";
	width: 38vw;
	min-width: 400px;
}

/* company */
#company.found .third-pageTtl-area{background-image: url(/company/found/img/pageTtl.jpg);}
#company.statement .third-pageTtl-area{background-image: url(/company/statement/img/pageTtl.jpg);}
#company.business .third-pageTtl-area{background-image: url(/company/business/img/pageTtl.jpg);}
#company.strategy .third-pageTtl-area{background-image: url(/company/strategy/img/pageTtl.jpg);}
#company.value .third-pageTtl-area{background-image: url(/company/value/img/pageTtl.jpg);}
#company.history .third-pageTtl-area{background-image: url(/company/history/img/pageTtl.jpg);}
#company.topmessage .third-pageTtl-area{
	background-position: center center;
	background-image: url(/company/topmessage/img/pageTtl.jpg);
}	
	@media screen and (max-width: 767px) {
	#company.topmessage .third-pageTtl-area{background-image: url(/company/topmessage/img/pageTtl_sp.jpg);}
	#company.topmessage .third-pageTtl-inner::before{min-width: 360px;}
	}


/* product */
#products.search .third-pageTtl-area{background-image: url(/products/search/img/pageTtl.jpg);}	
#products.name .third-pageTtl-area{background-image: url(/products/search/img/pageTtl_name.jpg);}
#products.business .third-pageTtl-area{background-image: url("/products/business/img/pageTtl.jpg");}	
/*#products.use .third-pageTtl-area{background-image: url(/products/search/img/pageTtl_mobility.jpg);}*/

/* ir */
#ir.individual .third-pageTtl-area{background-image: url("/ir/img/pageTtl_in.jpg");}	

/* innovation */
#tech.pickup .third-pageTtl-area{background-image: url("/innovation/pickup/img/pageTtl.jpg");}	
#tech.ao .third-pageTtl-area{background-image: url("/innovation/ao/img/pageTtl.jpg");}	


/* ---- toggle-set ---- */
.box-toggle button{
	background-color: transparent;
	border: none;
	cursor: pointer;
	outline: none;
	padding: 0;
	appearance: none;
	position: relative;
	width: 100%;	
}
.box-toggle button:focus{outline: auto;}
.box-toggle .toggle-box{
	position: relative;
	height: auto;
	max-height: 200px;
	padding:26px 0;
	overflow: hidden;
	transition: max-height 1s;
}
.box-toggle .toggle-box::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	transition: 1s;
	background: linear-gradient(to bottom,transparent 0%,#ffffff 100%);
}
.box-toggle .toggle-box.open::after{
	z-index: -1;
	opacity: 0;
}
.box-toggle .toggle-btn{
	display: block;
	margin: 0 auto;
	padding: 8px 40px;
	cursor: pointer;
}
.box-toggle+.box-toggle{
	margin-top:10px;
	padding-top: 60px;
	border-top: 1px solid #D7D7E1;
}
.box-toggle .toggle-btn,
.box-toggle .toggle-close{transition:.3s;}
.box-toggle .toggle-btn{
	line-height:1.4;
	box-sizing:border-box;
	display: block;
	width:100%;
	position:relative;
}
.box-toggle .toggle-btn>span{
	box-sizing:border-box;
	display: block;
	vertical-align:middle;
	height:100px;
	padding:20px;
	position: relative;
}
.box-toggle .toggle-btn>span>span{
	padding-right: 10px;
}
.box-toggle .toggle-btn:after,
.box-toggle .toggle-btn:before{
	content:"";
	background-color:#1566CC;
	display:block;
	width:20px;
	height:2px;
	margin-top:-1px;
	margin-left: -10px;
	position:absolute;
	top:50%;
	left:50%;
	transition:all 0.3s ease;
}
.box-toggle .toggle-btn:after{transform:rotate(90deg);}
.box-toggle .toggle-btn.open:after{transform:rotate(0);}
.box-toggle .toggle-btn>span:after{
	content: '';
	display: inline-block;
	position:absolute;
	width: 50px;
	height: 50px;
	top:50%;
	left:50%;
	margin-left: -25px;
	margin-top: -25px;	
	border-radius: 50%;
	border: solid 2px #1566CC;
}

.box-toggle .toggle-ttl-area{
	display: flex;
	flex-direction: row-reverse;
	column-gap: 34px;
	align-items: center;
}
.box-toggle .toggle-ttl-area.re{flex-direction: row;}
.box-toggle .toggle-ttl-area>*{width: calc((100% - 34px) / 2 );}
.box-toggle .toggle-ttl-area .ttl-box>*:not(:last-child){
	line-height: 1.4;
	margin-bottom: 10px;
}
.box-toggle .toggle-ttl-area .ttl-box .ttl-place{
	font-size: 14px;
	font-weight: 700;
}
.box-toggle .toggle-ttl-area .ttl-box .ttl-lead{font-size: 26px;}
.box-toggle .toggle-ttl-area .ttl-box .ttl-division{}

.box-toggle .toggle-box .toggle-col2{
	display: flex;
	column-gap: 34px;
	align-items: center;	
}
.box-toggle .toggle-box p + .toggle-col2{margin-top: 20px;}
.box-toggle .toggle-box .toggle-col2>*{width: calc((100% - 34px) / 2 );}
.box-toggle .toggle-box .toggle-col2>* img{width: 100%;}







@media screen and (max-width: 960px) {
/* ---- btnImg ----*/
.btnImgBox a:after{
	content: "";
	width: 70.574%;
	right: 40px;
}
.btnImgBox a .btnTxt{
	width: 70.574%;
	padding: 20px 80px 20px 26px;
}
/* width */
.wInherit-tb{width: inherit;}
/* gray-box */
.gray-box{
	background: #ECEFF1;
	padding: 50px 0;
	box-sizing: border-box;
}
.gray-box .inner{
	padding: 0 5%;
	max-width: inherit;
}	

/* ---- list-link-arw ---- */
.list-link-arw{margin-top: 50px;}
.list-link-arw li{width: calc((100% - 3%) / 2);}
.list-link-arw li:nth-child(n + 3) a{border-top: none;}	
.list-link-arw li a{
	font-size: 16px;
	padding: 16px 16px 16px 0;
}

	
/* ---- second-pageTtl-area ---- */
.second-pageTtl-area{
	min-height: 320px;
	background-position-x: center;
}
.second-pageTtl-inner::before{
	content: "";
	min-width:  500px;
	border-top: 290px solid #fff;
	border-right: 100px solid transparent;
}
.second-pageTtl{font-size: 44px;}

	
/* ---- third-pageTtl-area ---- */
.third-pageTtl-area{min-height: 200px;}
.third-pageTtl-inner::before{
	content: "";
	min-width: 470px;
	border-top: 174px solid #fff;
	border-right: 60px solid transparent;
}
.third-pageTtl{font-size: 34px;}
	
/* ---- toggle-set ---- */
.box-toggle .toggle-ttl-area{display: block;}
.box-toggle .toggle-ttl-area>*{width: 100%;}
.box-toggle .toggle-ttl-area .ttl-box .ttl-place{margin-top: 14px;}
.box-toggle .toggle-ttl-area .ttl-box .ttl-lead{font-size: 24px;}
.box-toggle .toggle-box .toggle-col2{column-gap: 26px;}
.box-toggle .toggle-box p + .toggle-col2{margin-top: 20px;}
.box-toggle .toggle-box .toggle-col2>*{width: calc((100% - 26px) / 2 );}

	
	
/* */
#products.search .third-pageTtl-inner::before,
#products.name .third-pageTtl-inner::before,
#products.business .third-pageTtl-inner::before{
	width: 30vw;
	min-width: 300px;
}
		
}

@media screen and (max-width: 520px) {
/* ---- ttl-catch ---- */
.ttl-catch{font-size: 24px;}	
	
/* ---- txt-mainL ---- */
.txt-mainL{font-size: 16px;}
	
/* ---- second-pageTtl-area ---- */
.second-pageTtl-area{
	min-height: 230px;
	margin-bottom: 20px;
	align-items: flex-start;
}
.second-pageTtl-inner{
	min-width: 210px;
	padding: 20px 5% 0;
}
.second-pageTtl-inner::before{
	content: "";
	/*width: 46vw;
	min-width: 210px;	*/
	min-width: 0;
	top: 5px;
	left:5px;
	border-top: 220px solid #fff;
	border-right: 75px solid transparent;
}
.second-pageTtl-inner.enter::before{
	width: 46vw;
	min-width: 220px;
}
.second-pageTtl-box{height: 50px;}	
.second-pageTtl{font-size: 24px;}
	
/* ---- third-pageTtl-area ---- */
.third-pageTtl-area{
	min-height: 120px;
	margin-bottom: 20px;
}
.third-pageTtl-inner{
	min-width: 300px;
	padding: 0 5%;
}
.third-pageTtl-inner::before{
	content: "";
	width: 46vw;
	min-width: 300px;		
	top: 5px;
	left:5px;
	border-top: 110px solid #fff;
	border-right: 40px solid transparent;
}
	
/* */
#products.search .third-pageTtl-inner::before,
#products.name .third-pageTtl-inner::before,
#products.business .third-pageTtl-inner::before{min-width: 224px;}	
	
#company.topmessage .third-pageTtl-inner::before{min-width: 260px;}
.third-pageTtl{font-size: 24px;}	
	
/* ---- btnImg ----*/
.btnImgBox a{height: 100px;}
.btnImgBox a:after{border-top: 100px solid #1566CC;}
	
/* ---- btnImgL ----*/
.btnLImgBox a .btnLTxt{
	font-size: 18px;
	padding: 5px 20px 5px 10px;
}	
	
/* ---- list-link-arw ---- */
.list-link-arw li{width: 100%;}
.list-link-arw li:nth-child(n + 2) a{border-top:none;}	
		
	
}




